<template>
  <el-row justify="space-around">
    <el-col :xs="24" :lg="6">
      <el-card shadow="never">
        <template #header>
          <div style="text-align: left">
            <strong>About</strong>
          </div>
        </template>
        <el-avatar size="large" alt="用户头像" :src="user.userAvatar"/>
        <el-row justify="center">
        <el-form  label-width="80px">
          <el-form-item label="权限：">
            <strong>管理员</strong>
          </el-form-item>
          <el-form-item label="账户id：">
            <strong>{{user.userId}}</strong>
          </el-form-item>
          <el-form-item label="用户名：">
            <strong>{{user.userName}}</strong>
          </el-form-item>
          <el-form-item label="邮箱：">
            <strong>{{user.userEmail}}</strong>
          </el-form-item>
        </el-form>
        </el-row>
      </el-card>
    </el-col>
    <el-col :xs="24" :lg="16">
      <el-tabs>
        <el-tab-pane label="我的新闻">
          <News :user-id="user.userId" />
        </el-tab-pane>
        <el-tab-pane label="我的公告">
          <Announce :user-id="user.userId"/>
        </el-tab-pane>
        <el-tab-pane label="账户设置">
          <account/>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>

</template>

<script>
import Account from "@/views/profile/admin/accountInfo/account";
import News from "@/views/profile/admin/accountInfo/News";
import Announce from "@/views/profile/admin/accountInfo/announce";
import {getInfo} from "@/api/user";
export default {
  name: "admin",
  components: {Announce, News, Account},
  data(){
    return{
      user:{}
    }
  },
  mounted() {
    if (this.$store.getters.username!=='')
    this.getUser()
  },
  methods:{
    getUser(){
      getInfo(this.$store.getters.username).then(response =>{
        this.user=response.data.userInfo
      })
    }
  }
}
</script>

<style scoped>

</style>
